<template>
  <!-- 歌单分类组件 -->
  <div class="categorys" :style="{ display: isHide ? 'block' : 'none' }">
    <div class="all">
      <span
        style="
          padding: 6px 8px;
          background-color: #fff;
          line-height: 50px;
          border: 1px solid #ccc;
          color: #222;
          cursor: pointer;
        "
        >全部风格</span
      >
    </div>
    <div class="item" v-for="obj in categorys" :key="obj.k">
      <div class="type">{{ obj.k }}</div>
      <div class="cs">
        <span
          class="category"
          v-for="item in obj.v"
          :key="item.name"
          @click="handleCategory(item.name)"
        >
          {{ item.name }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, inject } from "vue";
export default defineComponent({
  name: "Categorys",
  props: {
    isHide: {
      type: Boolean,
      default: false,
      require: false,
    },
  },
  setup(props, context) {
    const categorys = inject("categorys"); // 歌单分类数据

    // 点击选择分类歌单中的歌单回调
    let handleCategory = (category) => {
      // 提交给父组件
      context.emit("handleCategory", category);
    };

    return { categorys, handleCategory };
  },
});
</script>
<style scoped>
.categorys {
  width: 800px;
  position: absolute;
  border-radius: 5px;
  top: 25px;
  transition: all 0.3s;
  background-color: #fff;
  padding: 20px 15px;
  padding-top: 0;
  box-shadow: -1px 1px 4px 3px #ccc;
  z-index: 888;
}
.all {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #ccc;
}
.item {
  width: 100%;
  margin: 20px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.type {
  color: #000;
  font-weight: 600;
  width: 60px;
  text-align: center;
}
.cs {
  flex: 1;
  margin-left: 8px;
}
.category {
  display: inline-block;
  padding: 0 8px;
  margin: 5px 0;
  color: #222;
  border-right: 1px solid #ccc;
  cursor: pointer;
  transition: all 0.2s;
}
.category:hover {
  text-decoration: underline;
}
</style>
